<template>
  <div class="main">
    <PureTableBar title="推送任务" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="addProVisible = true"> 创建推送任务 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
        </pure-table>
      </template>
    </PureTableBar>
    <ReDialog :width="550" :height="350" :models="addProVisible" @Closes="cancel()">
      <template #header>
        <h2 style="text-align: center;">推送任务</h2>
      </template>
      <template #main>
        <el-form label-width="90" label-position="left" style="width: 70%; margin: 0 auto" :model="formData" status-icon
          :rules="rule" ref="pushFrom">
          <el-form-item label="任务名称:" prop="PushTaskName">
            <el-input v-model.trim="formData.PushTaskName" />
          </el-form-item>
          <el-form-item label="产品类型:" prop="ProductType">
            <el-select v-model="formData.ProductType" style="width: 100%">
              <el-option v-for="type in productTypeList" :key="type.selectId" :label="type.selectId"
                :value="type.selectId" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户群:" prop="UserPortraitId">
            <el-select v-model="formData.UserPortraitId" style="width: 100%">
              <el-option v-for="r in customerList" :key="r.selectId" :label="r.selectContent" :value="r.selectId" />
            </el-select>
          </el-form-item>
          <el-form-item label="推送方式:" prop="PushMethod">
            <el-select v-model="formData.PushMethod" style="width: 100%">
              <el-option v-for="r in pushMethodList" :key="r.selectId" :label="r.selectId" :value="r.selectId" />
            </el-select>
          </el-form-item>
          <el-form-item label="推送时间:" prop="StartMethod">
            <el-col :span="12">
              <el-select v-model="formData.StartMethod" class="!w-[100%]">
                <el-option v-for="r in  startMethod" :key="r.selectId" :label="r.selectId" :value="r.selectId" />
              </el-select>
            </el-col>
            <el-col :span="1"><span></span> </el-col>
            <el-col :span="11" v-if="formData.StartMethod == '指定时间开始'">
              <el-date-picker v-model="formData.startTime" type="datetime" placeholder="请选择推送时间" class="!w-[100%]"
                format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" />
            </el-col>
            <el-col :span="11" v-if="formData.StartMethod == '定期开始'">
              <el-select v-model="formData.PushFrequency" class="!w-[100%]">
                <el-option v-for="r in  pushFrequencyList" :key="r.selectId" :label="r.selectId" :value="r.selectId" />
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="save(pushFrom)"> 确定 </el-button>
          <el-button @click="cancel()"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>
  </div>
</template>

<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { ref } from "vue";
import { useCreditReport } from "./hook/accuratePush";
const pushFrom = ref();
const {
  dataList,
  loading,
  pagination,
  columns,
  addProVisible,
  productTypeList,
  pushMethodList,
  pushFrequencyList,
  startMethod,
  customerList,
  formData,
  handleCurrentChange,
  handleSizeChange,
  save,
  cancel,
  rule,
} = useCreditReport()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

:deep(.el-form-item__label) {
  font-weight: 700
}
</style>
